<template>  
  <div id="itemMessage">
    <section class="msgTop">
      <span class="frt iconfont" 
      :class="Number(itemMessageData.count02) > 0 ? 'icon-xiangxia':'icon-guanbi'" @click="examineDetailMsg"
      :style="{transform: `rotate(${isShow ? 180 : 0}deg)`}"></span>
      <div class="msgTitle">{{itemMessageData.organizationName}}</div>
      <ul>
        <li>{{itemMessageData.address}}</li>
        <li>{{itemMessageData.contacts}}</li>
        <li>{{itemMessageData.contactWay}}</li>
      </ul>
    </section>
    <section class="detailList">
      <ul class="example">
        <li class="orange">
          <span class="dian"></span>
          预警
        </li>
        <li class="red">
          <span class="dian"></span>
          告警
        </li>
        <li class="gray">
          <span class="dian"></span>
          离线
        </li>
        <li class="white">
          <span class="dian"></span>
          断路
        </li>
        <li class="yellow">
          <span class="dian"></span>
          短路
        </li>
      </ul>
      <ul class="msg">
        <li 
          v-for="(item, idx) in orgInfo"
          :key="idx"
          @click="goDetailsData(item)"
          >
          <span class="flt">
            <span class="dian"
              :class="{
                orange: item.alarmStatus === '01',
                red: item.alarmStatus === '02',
                gray: item.alarmStatus === '03',
                white: item.alarmStatus === '04',
                yellow: item.alarmStatus === '05'
              }"></span>
              {{item.buildingName}}
          </span>
          <span class="frt">{{item.terminalName}}</span>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  name: 'itemMessage',
  props: ["itemMessageData"],
  data () {
    return {
      orgInfo: [],
      isShow: false,
    }
  },
  watch: {
    itemMessageData () {
      this.isShow = false;
      this.getOrgInfo();
    }
  },
  methods: {
    getOrgInfo () {
      this.$http.get(
        `/Anxun/app/getOrgInfo.do?orgNo=${this.itemMessageData.organizationNo}`
      ).then(res => {
        if(res.code === 0){
          this.orgInfo = res.terminalList
        }else{
          alert(res.msg);
        }
      })
    },
    //查看下拉
    examineDetailMsg () {
      if(!this.isShow){
        this.$emit("detailsNum", this.orgInfo.length);
        this.isShow = true;
      }else{
        this.$emit("detailsNum", 0);
        this.isShow = false;
      }
    },
    goDetailsData (data) {
      this.$router.push({
        path: '/detailsData',
        query: {
          companyName: this.itemMessageData.organizationName,
          terminal: data.terminalName,
          terminalId: data.terminalNo
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  #itemMessage{
    width: 100%;
    height: 100%;
    .msgTop{
      width: 100%;
      height: 120px;
      position: relative;
      padding: 0 10px;
      box-sizing: border-box;
      .iconfont{
        display: block;
        padding: 5px;
        width: 20px;
        height: 20px;
        box-sizing: content-box;
        top: 0;
        right: 0;
        font-size: 20px;
        color: #666;
        transition: all 0.3s;
      }
      .msgTitle{
        width: 100%;
        height: 40px;
        padding-top: 5px;
        box-sizing: border-box;
        font-size: 18px;
        color: #333;
        line-height: 35px;
      }
      ul{
        line-height: 23px;
      }
    }
    .detailList{
      width: 100%;
      height: calc(100% - 120px);
      .example{
        width: 100%;
        height: 40px;
        background: #dedede;
        padding: 0 10px;
        box-sizing: border-box;
        li{
          float: left;
          padding: 0 5px;
          position: relative;
          line-height: 40px;
          .dian{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-top: 16px;
            margin-right: 5px;
            float: left;
          }
        }
        .orange{
          color: orange;
          .dian{
            background: orange; 
          }
        }
        .red{
          color: red;
          .dian{
            background: red; 
          }
        }
        .gray{
          color: gray;
          .dian{
            background: gray; 
          }
        }
        .white{
          color: #999;
          .dian{
            width: 7px;
            height: 7px;
            background: #fff; 
            border: 1px solid #999;
          }
        }
        .yellow{
          color: yellow;
          .dian{
            background: yellow; 
          }
        }
      }
      .msg{
        width: 100%;
        height: calc(100% - 40px);
        overflow-y: auto;
        li{
          width: 100%;
          height: 40px;
          line-height: 40px;
          padding: 0 10px;
          box-sizing: border-box;
          span{
            width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
            .dian{
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-top: 16px;
              margin-right: 5px;
              float: left;
            }
            .orange{
              background: orange;
            }
            .red{
              background: red;
            }
            .gray{
              background: gray;
            }
            .white{
              width: 7px;
              height: 7px;
              background: #fff; 
              border: 1px solid #999;
            }
            .yellow{
              background: yellow;
            }
          }
        }
      }
    }
  }
</style>